
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>表单 - UIkit 中文文档</title>
        <meta name="description" content="使用UIkit的表单组件，可以轻松地为页面加入拥有不同样式和布局的漂亮表单。">
        <meta name="author" content="UIkit中文网">
         
<meta name="keywords" content="UIKit表单,form,状态,调整,禁用,帮助文本,布局">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li class="uk-active"><a href="core.html">核心组件</a></li>
                    <li><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>

                            <li class="uk-nav-header">默认</li>
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>

                            <li class="uk-nav-header">布局类组件</li>
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>

                            <li class="uk-nav-header">导航类组件</li>
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>

                            <li class="uk-nav-header">页面元素</li>
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li class="uk-active"><a href="form.html">表单</a></li>

                            <li class="uk-nav-header">常用组件</li>
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>

                            <li class="uk-nav-header">JavaScript组件</li>
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动器</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>

                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1 class="uk-article-title">表单</h1>

                            <p class="uk-article-lead">轻松创建拥有不同样式与布局的漂亮表单。</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">用法</a></h2>

                            <p>为了应用这个组件，需要添加 <code>.uk-form</code> 类到表单元素中。所有表单控件都被并排放置在下面这行。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <form class="uk-form">

                                <fieldset data-uk-margin>
                                    <legend>表单</legend>
                                      <input type="text" placeholder="Text input">
                                      <input type="password" placeholder="Password input">
                                      <select>
                                        <option>Option 01</option>
                                        <option>Option 02</option>
                                      </select>
                                    <button class="uk-button">Button</button>
                                    <label><input type="checkbox"> Checkbox</label>
                                </fieldset>

                            </form>

                            <p><span class="uk-badge">注意</span> 在这个例子中，我们使用了一个<a href="http://iyunye.com/uikit/docs/button.html">按钮组件</a>中的按钮。当表单元素在较小的视口中堆叠时，只需要添加 <a href="../docs/utility.html">效果组件</a> 中的 <code>data-uk-margin</code> 属性到它的父元素中，即可实现添加顶部margin。</p>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;form class="uk-form"&GT;

    &lt;fieldset data-uk-margin&GT;
        &lt;legend&GT;...&lt;/legend&GT;
        &lt;input type="text" placeholder=""&GT;
        &lt;input type="password" placeholder=""&GT;
        &lt;select&GT;
            &lt;option&GT;...&lt;/option&GT;
            &lt;option&GT;...&lt;/option&GT;
        &lt;/select&GT;
        &lt;button class="uk-button"&GT;...&lt;/button&GT;
        &lt;label&GT;&lt;input type="checkbox"&GT; ...&lt;/label&GT;
    &lt;/fieldset&GT;

&lt;/form&GT;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>行</h3>

                            <p>为一个 <code>&lt;div&gt;</code> 元素添加 <code>.uk-form-row</code> 用来放置表单控件。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <form class="uk-form uk-width-medium-1-3">

                                <fieldset>
                                    <legend>Legend</legend>
                                    <div class="uk-form-row">
                                        <input type="text" placeholder="Text input">
                                    </div>
                                    <div class="uk-form-row">
                                        <input type="password" placeholder="Password input">
                                    </div>
                                    <div class="uk-form-row">
                                        <select>
                                            <option>Option 01</option>
                                            <option>Option 02</option>
                                        </select>
                                    </div>
                                    <div class="uk-form-row">
                                        <button class="uk-button">Button</button>
                                    </div>
                                    <div class="uk-form-row">
                                        <label><input type="checkbox"> Checkbox</label>
                                    </div>
                                </fieldset>

                            </form>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;form class="uk-form"&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;...&lt;/legend&gt;
        &lt;div class="uk-form-row"&gt;...&lt;/div&gt;
        &lt;div class="uk-form-row"&gt;...&lt;/div&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;</code></pre>

                            <hr class="uk-article-divider">
                            <h2 id="control-states"><a href="#control-states" class="uk-link-reset">控件的状态</a></h2>
                            
                            <p>通过表单控件上反馈的状态，为用户提供基础信息。</p>

                            <h3>禁用</h3>

                            <p>添加 <code>disabled</code> 属性到表单控件中，它的颜色会变淡，并禁止操作。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <form class="uk-form">
                                <input type="text" placeholder="Text input" disabled>
                                <select disabled>
                                    <option>Option 01</option>
                                    <option>Option 02</option>
                                </select>
                            </form>

                            <h4 class="tm-article-subtitle">Code</h4>
<pre><code>&lt;input type="text" placeholder="" disabled&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>有效性状态</h3>

                            <p>添加 <code>.uk-form-danger</code> 或 <code>.uk-form-success</code> 类到表单控件中，用于提示用户某个值是否通过有效性验证。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <form class="uk-form">
                                <div class="uk-form-row">
                                    <input type="text" placeholder="form-danger" class="uk-form-danger" value="form-danger">
                                </div>
                                <div class="uk-form-row">
                                    <input type="text" placeholder="form-success" class="uk-form-success" value="form-success">
                                </div>
                            </form>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;input type="text" placeholder="" class="uk-form-danger"&gt;
&lt;input type="text" placeholder="" class="uk-form-success"&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="control-modifiers"><a href="#control-modifiers" class="uk-link-reset">控件的修饰</a></h2>

                            <h3>尺寸的调整</h3>

                            <p>添加 <code>.uk-form-large</code> 或 <code>.uk-form-small</code> 类到 <code>&lt;input&gt;</code>, <code>&lt;select&gt;</code> 或 <code>&lt;textarea&gt;</code> 元素中使之变大或变小。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <form class="uk-form">
                                <div class="uk-form-row">
                                    <input type="text" placeholder="form-large" class="uk-form-large">
                                </div>
                                <div class="uk-form-row">
                                    <input type="text" placeholder="Default">
                                </div>
                                <div class="uk-form-row">
                                    <input type="text" placeholder="form-small" class="uk-form-small">
                                </div>

                            </form>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;input type="text" placeholder="" class="uk-form-large"&gt;
&lt;input type="text" placeholder="" class="uk-form-small"&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>宽度的调整</h3>

                            <p>添加 <code>.uk-form-width-large</code>, <code>.uk-form-width-medium</code>, <code>.uk-form-width-small</code> 或 <code>.uk-form-width-mini</code> 类到一个 <code>&lt;input&gt;</code>, <code>&lt;select&gt;</code> 或 <code>&lt;textarea&gt;</code> 元素中，调整它的宽度。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <form class="uk-form">

                                <div class="uk-form-row">
                                    <input type="text" placeholder="form-width-large" class="uk-form-width-large">
                                </div>
                                <div class="uk-form-row">
                                    <input type="text" placeholder="form-width-medium" class="uk-form-width-medium">
                                </div>
                                <div class="uk-form-row">
                                    <input type="text" placeholder="form-width-small" class="uk-form-width-small">
                                </div>
                                <div class="uk-form-row">
                                    <input type="text" placeholder="form-width-mini" class="uk-form-width-mini">
                                </div>

                            </form>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;input type="text" placeholder="" class="uk-form-width-large"&gt;
&lt;input type="text" placeholder="" class="uk-form-width-medium"&gt;
&lt;input type="text" placeholder="" class="uk-form-width-small"&gt;
&lt;input type="text" placeholder="" class="uk-form-width-mini"&gt;</code></pre>

                            <p>你还可以在表单控件里使用 <a href="grid.html">网格组件</a> 中的 <code>.uk-width-*</code> 类。这是非常有用的，如果你想让表单控件的宽度扩展填满它的父级容器的宽度。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <form class="uk-form">

                                <input type="text" placeholder="width-100" class="uk-width-1-1">

                            </form>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;input type="text" placeholder="" class="uk-width-1-1"&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>白板表单</h3>

                            <p>添加 <code>.uk-form-blank</code> 类使表单控件的样式极简化。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <form class="uk-form">
                                <div class="uk-form-row">
                                    <input type="text" placeholder="form-blank" class="uk-form-blank">
                                </div>
                            </form>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;input type="text" placeholder="" class="uk-form-blank"&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>帮助文本</h3>

                            <p>使用 <code>.uk-form-help-inline</code> 或 <code>.uk-form-help-block</code> 类，为表单控件添加行内的或者块级的帮助文本。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <form class="uk-form">

                                <div class="uk-form-row">
                                    <p>
                                      <input type="text" placeholder="Text input"> 
                                      <span class="uk-form-help-inline">这里使用 <code>.uk-form-help-inline</code> 类建立了左侧的间距。</span>
                                    </p>
                                </div>

                                <div class="uk-form-row">
                                    <textarea cols="30" rows="5" placeholder="Textarea"></textarea>
                                    <p class="uk-form-help-block">这里使用 <code>.uk-form-help-block</code> 类建立了与上文相关联的段落。</p>
                                </div>

                            </form>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;div class="uk-form-row"&gt;
    &lt;input type="text" placeholder=""&gt; &lt;span class="uk-form-help-inline"&gt;...&lt;/span&gt;
&lt;/div&gt;

&lt;div class="uk-form-row"&gt;
    &lt;textarea cols="" rows="" placeholder=""&gt;...&lt;/textarea&gt;
    &lt;p class="uk-form-help-block"&gt;...&lt;/p&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="layout-modifiers"><a href="#layout-modifiers" class="uk-link-reset">布局的调整</a></h2>

                            <p>这里有两个可用的类可以用于布局调整： <code>.uk-form-stacked</code> and <code>.uk-form-horizontal</code>。它们都要求表单空间被放置在带有 <code>.uk-form-row</code> 类的容器中。 Label 必须添加 <code>.uk-form-label</code> 类，并把相应的空间放置在带有 <code>.uk-form-controls</code> 类的容器中。</p>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;form class="uk-form uk-form-stacked"&gt;
    &lt;div class="uk-form-row"&gt;
        &lt;label class="uk-form-label" for=""&gt;...&lt;/label&gt;
        &lt;div class="uk-form-controls"&gt;...&lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>

                            <p><span class="uk-badge">注意</span> 布局调整类同样可以用于  <code>&lt;fieldset&gt;</code> 元素中。这意味着如果你使用了多个fieldset，你可以为每个 fieldset设置不同的布局。</p>

                            <hr class="uk-article-divider">

                            <h3>表单叠放</h3>

                            <p>添加 <code>.uk-form-stacked</code> 类使label标签显示在控件上方。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <form class="uk-form uk-form-stacked">

                                    <div class="uk-form-row">
                                        <label class="uk-form-label" for="form-s-it">Text input</label>
                                        <div class="uk-form-controls">
                                            <input type="text" id="form-s-it" placeholder="Text input">
                                        </div>
                                    </div>
                                    <div class="uk-form-row">
                                        <label class="uk-form-label" for="form-s-ip">Password input</label>
                                        <div class="uk-form-controls">
                                            <input type="password" id="form-s-ip" placeholder="Password input">
                                        </div>
                                    </div>

                                    <div class="uk-form-row">
                                        <label class="uk-form-label" for="form-s-s">Select field</label>
                                        <div class="uk-form-controls">
                                            <select id="form-s-s">
                                                <option>Option 01</option>
                                                <option>Option 02</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="uk-form-row">
                                        <label class="uk-form-label" for="form-s-t">Textarea</label>
                                        <div class="uk-form-controls">
                                            <textarea id="form-s-t" cols="30" rows="5" placeholder="Textarea text"></textarea>
                                        </div>
                                    </div>
                                    <div class="uk-form-row">
                                        <span class="uk-form-label">Radio input</span>
                                        <div class="uk-form-controls">
                                            <input type="radio" id="form-s-r" name="radio"> <label for="form-s-r">Radio input</label><br>
                                            <input type="radio" id="form-s-r1" name="radio"> <label for="form-s-r1">1</label>
                                            <label><input type="radio" name="radio"> 2</label>
                                            <label><input type="radio" name="radio"> 3</label>
                                        </div>
                                    </div>
                                    <div class="uk-form-row">
                                        <span class="uk-form-label">Checkbox input</span>
                                        <div class="uk-form-controls">
                                            <input type="checkbox" id="form-s-c"> <label for="form-s-c">Checkbox input</label><br>
                                            <input type="checkbox" id="form-s-c1"> <label for="form-s-c1">1</label>
                                            <label><input type="checkbox"> 2</label>
                                            <label><input type="checkbox"> 3</label>
                                        </div>
                                    </div>
                                    <div class="uk-form-row">
                                        <span class="uk-form-label">Mixed controls</span>
                                        <div class="uk-form-controls">
                                            <input type="checkbox" id="form-s-mix1"> <label for="form-s-mix1">Checkbox input</label>
                                            <input type="number" id="form-s-mix2" min="0" max="10" value="5" class="uk-form-width-mini uk-form-small"> <label for="form-s-mix2">Number input</label>
                                            <select id="form-s-mix3" class="uk-form-small">
                                                <option selected="selected">Option 01</option>
                                                <option>Option 02</option>
                                            </select>
                                            <label for="form-s-mix3">Select field</label>
                                        </div>
                                    </div>

                            </form>

                            <hr class="uk-article-divider">

                            <h3>水平放置表单</h3>

                            <p>添加 <code>.uk-form-horizontal</code> 类使label标签和控件水平并排放置。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <form class="uk-form uk-form-horizontal">

                                <div class="uk-form-row">
                                    <label class="uk-form-label" for="form-h-it">Text input</label>
                                    <div class="uk-form-controls">
                                        <input type="text" id="form-h-it" placeholder="Text input">
                                    </div>
                                </div>
                                <div class="uk-form-row">
                                    <label class="uk-form-label" for="form-h-ip">Password input</label>
                                    <div class="uk-form-controls">
                                        <input type="password" id="form-h-ip" placeholder="Password input">
                                    </div>
                                </div>
                                <div class="uk-form-row">
                                    <label class="uk-form-label" for="form-h-s">Select field</label>
                                    <div class="uk-form-controls">
                                        <select id="form-h-s">
                                            <option>Option 01</option>
                                            <option>Option 02</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="uk-form-row">
                                    <label class="uk-form-label" for="form-h-t">Textarea</label>
                                    <div class="uk-form-controls">
                                        <textarea id="form-h-t" cols="30" rows="5" placeholder="Textarea text"></textarea>
                                    </div>
                                </div>

                                <div class="uk-form-row">
                                    <span class="uk-form-label">Radio input</span>
                                    <div class="uk-form-controls uk-form-controls-text">
                                        <input type="radio" id="form-h-r" name="radio"> <label for="form-h-r">Radio input</label><br>
                                        <input type="radio" id="form-h-r1" name="radio"> <label for="form-h-r1">1</label>
                                        <label><input type="radio" name="radio"> 2</label>
                                        <label><input type="radio" name="radio"> 3</label>
                                    </div>
                                </div>
                                <div class="uk-form-row">
                                    <span class="uk-form-label">Checkbox input</span>
                                    <div class="uk-form-controls uk-form-controls-text">
                                        <input type="checkbox" id="form-h-c"> <label for="form-h-c">Checkbox input</label><br>
                                        <input type="checkbox" id="form-h-c1"> <label for="form-h-c1">1</label>
                                        <label><input type="checkbox"> 2</label>
                                        <label><input type="checkbox"> 3</label>
                                    </div>
                                </div>
                                <div class="uk-form-row">
                                    <span class="uk-form-label">Mixed controls</span>
                                    <div class="uk-form-controls uk-form-controls-text">
                                        <input type="checkbox" id="form-h-mix4"> <label for="form-h-mix4">Checkbox input</label>
                                        <input type="number" id="form-h-mix5" min="0" max="10" value="5" class="uk-form-width-mini uk-form-small"> <label for="form-h-mix5">Number input</label>
                                        <select id="form-h-mix6" class="uk-form-small">
                                            <option selected="selected">Option 01</option>
                                            <option>Option 02</option>
                                        </select>
                                        <label for="form-h-mix6">Select field</label>
                                    </div>
                                </div>

                            </form>

                            <hr class="uk-article-divider">

                            <h3>表单控件中的文本</h3>

                            <p>如果你在表单控件中同时使用了文本与单选框或者文本与复选框，只需要添加 <code>.uk-form-controls-text</code> 类就能使文本适当地对齐。</p>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;div class="uk-form-controls uk-form-controls-text"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>表单控件中的垂直间距</h3>

                            <p>如果你在表单控件中创建了段落，添加 <code>.uk-form-controls-condensed</code> 类可以减小段落间的间隔。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <form class="uk-form uk-form-stacked">
                                <div class="uk-form-row">
                                    <span class="uk-form-label">Mixed controls混合放置的控件</span>
                                    <div class="uk-form-controls uk-form-controls-text">
                                        <p class="uk-form-controls-condensed">
                                            <input type="checkbox" id="form-h-mix1"> <label for="form-h-mix1">Checkbox input</label>
                                            <input type="number" id="form-h-mix2" min="0" max="10" value="5" class="uk-form-width-mini uk-form-small"> <label for="form-h-mix2">Number input</label>
                                            <select id="form-h-mix3" class="uk-form-small">
                                                <option selected="selected">Option 01</option>
                                                <option>Option 02</option>
                                            </select>
                                            <label for="form-h-mix3">Select field</label>
                                        </p>
                                        <p class="uk-form-controls-condensed">
                                            <label><input type="checkbox"> Checkbox input</label>
                                            <label><input type="number" min="0" max="10" value="5" class="uk-form-width-mini uk-form-small"> Number input</label>
                                            <label>
                                                <select class="uk-form-small">
                                                    <option selected="selected">Option 01</option>
                                                    <option>Option 02</option>
                                                </select>
                                                Select field
                                            </label>
                                        </p>
                                    </div>
                                </div>

                        </form>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;div class="uk-form-controls uk-form-controls-text"&gt;
    &lt;p class="uk-form-controls-condensed"&gt;...&lt;/p&gt;
    &lt;p class="uk-form-controls-condensed"&gt;...&lt;/p&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="form-and-grid"><a href="#form-and-grid" class="uk-link-reset">表单与网格</a></h2>

                            <p>这个例子展示了如何用  <a href="../docs/grid.html">网格组件</a> 空间表单。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <form class="uk-form">

                                <div class="uk-grid">
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="100" class="uk-width-1-1">
                                    </div>
                                </div>

                                <div class="uk-grid">
                                    <div class="uk-width-1-2"><input type="text" placeholder="50" class="uk-width-1-1"></div>
                                    <div class="uk-width-1-4"><input type="text" placeholder="25" class="uk-width-1-1"></div>
                                    <div class="uk-width-1-4"><input type="text" placeholder="25" class="uk-width-1-1"></div>
                                </div>

                                <div class="uk-grid" data-uk-grid-margin>
                                    <div class="uk-width-medium-1-2">
                                        <div class="uk-form-controls">
                                            <input type="text" placeholder="50" class="uk-width-1-1">
                                        </div>
                                    </div>
                                    <div class="uk-width-medium-1-2">
                                        <div class="uk-form-controls">
                                            <input type="text" placeholder="50" class="uk-width-1-1">
                                        </div>
                                    </div>
                                </div>

                            </form>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;form class="uk-form"&gt;

    &lt;div class="uk-grid"&gt;
        &lt;div class="uk-width-1-2"&gt;&lt;input type="text" placeholder="" class="uk-width-1-1"&gt;&lt;/div&gt;
        &lt;div class="uk-width-1-4"&gt;&lt;input type="text" placeholder="" class="uk-width-1-1"&gt;&lt;/div&gt;
        &lt;div class="uk-width-1-4"&gt;&lt;input type="text" placeholder="" class="uk-width-1-1"&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;/form&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="form-and-icons"><a href="#form-and-icons" class="uk-link-reset">表单与图标</a></h2>

                            <p>这个例子展示了怎么为表单添加 <a href="../docs/icon.html">图标</a>。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <form class="uk-form" data-uk-margin>

                                <div class="uk-form-icon">
                                    <i class="uk-icon-calendar"></i>
                                    <input type="text">
                                </div>
                                <div class="uk-form-icon">
                                    <i class="uk-icon-clock-o"></i>
                                    <input type="text">
                                </div>

                            </form>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;div class="uk-form-icon"&gt;
    &lt;i class="uk-icon-calendar"&gt;&lt;/i&gt;
    &lt;input type="text"&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="form-advanced"><a href="#form-advanced" class="uk-link-reset">表单增强</a></h2>

                            <p>表单可以用 <a href="../docs/form-advanced.html">表单增强组件</a> 进行扩展，以定义单选框与复选框的样式。</p>


                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>